<template>
    <div>
        <div>
            <Breadcrumb :style="{ margin: '20px 0' }">
                <BreadcrumbItem>发布操作</BreadcrumbItem>
                <BreadcrumbItem>关键词设置</BreadcrumbItem>
            </Breadcrumb>
            <ButtonGroup class="button">
                <Button type="primary" @click="createKeyword">添加</Button>
            </ButtonGroup>
            <Table :columns="columns" :data="keywordList"></Table>
            <div>
                <Page :page-size="page.limit" :total="page.total" simple @on-change="pageChange"/>
            </div>
            <Modal v-model="editModel" title="分类编辑" @on-ok="saveKeyword">
                <div class="field">
                    <div class="label">类型</div>
                    <Input v-model="keyword.type" class="mb-10" placeholder="名称"/>
                </div>
                <div class="field">
                    <div class="label">关键字、话题（词之间用/分隔）</div>
                    <Input v-model="keyword.content" type="textarea" :rows="4" placeholder=""/>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
import model from '../util/model';

export default {
    name: 'ContentKeyword',
    data: function () {
        return {
            editModel: false,
            page: {
                limit: 10,
                skip: 0,
                total: 0
            },
            keywordList: [],
            isCreate: true,
            keyword: {
                type: '',
                content: ''
            },
            columns: [
                {
                    title: '标题',
                    key: 'type'
                },
                {
                    title: '关键字/话题',
                    key: 'content'
                },
                {
                    title: '操作',
                    render: (h, p) => {
                        return h('div', [
                            h('Icon', {
                                props: {
                                    type: 'md-create',
                                    size: '14'
                                },
                                on: {
                                    'click': () => {
                                        this.editKeyword(p);
                                    }
                                }
                            }),
                            h('Icon', {
                                props: {
                                    type: 'md-trash',
                                    size: '14'
                                },
                                on: {
                                    'click': () => {
                                        this.removeOne(p);
                                    }
                                }
                            })

                        ]);
                    }
                }
            ],
            pageStorage: {
                keyword: {}
            }
        };
    },
    created: function () {
        this.pageStorage.keyword = Object.assign({}, this.keyword);
        this.getKeywordList();
    },
    methods: {
        getKeywordList: function () {
            let that = this;
            model.contentKeyword.count({}, (err, total) => {
                if (err) {
                    return false;
                } else {
                    that.page.total = total;
                }
            });
            model.contentKeyword.find({}).skip(that.page.skip).limit(that.page.limit).exec((err, doc) => {
                if (err) {
                    that.keywordList = [];
                } else {
                    console.log(doc);
                    that.keywordList = doc;
                }
            });
        },
        pageChange: function (page) {
            this.page.skip = this.page.limit * page - this.page.limit;
            this.getContentCategory();
        },
        createKeyword: function () {
            this.editModel = true;
            this.isCreate = true;
        },
        saveKeyword: function () {
            let that = this;
            if (this.isCreate) {
                model.contentKeyword.insert(this.keyword, (err) => {
                    if (err) {
                        that.$Message.info('保存失败');
                    } else {
                        that.$Message.info('保存成功');
                        that.getKeywordList();
                    }
                });
            } else {
                model.contentKeyword.update({_id: this.keyword._id}, this.keyword, (err) => {
                    if (err) {
                        that.$Message.info('保存失败');
                    } else {
                        that.$Message.info('保存成功');
                        that.getKeywordList();
                    }
                });
            }

        },
        editKeyword: function (p) {
            this.keyword = p.row;
            this.editModel = true;
            this.isCreate = false;
        },
        removeOne: function (p) {
            let that = this;
            model.contentKeyword.remove({_id: p.row._id}, (err) => {
                if (err) {
                    that.$Message.info('删除失败');
                } else {
                    that.$Message.info('删除成功');
                    that.getKeywordList()
                }
            });
        }
    },
};
</script>

<style scoped>

</style>
